<template>
    <div>
        <div class="commodity-header">
            <img class="return" src="/public/images/commodity-return.png" @tap="goback">
            <a href="../../shoppingCart/index.html"><img class="car-link" src="/public/images/commodity-car-link.png"></a>
        </div>
        <div class="commodity">
            <div class="mui-slider">
                <div class="mui-slider-group">
                    <div class="mui-slider-item" v-for="item in data.detail.carouselPics">
                        <img class="commodity-img" :src="item.imageUrl" @load="intiSlider">
                    </div>
                </div>
            </div>
            <div class="commodity-name">
                <h4>{{data.detail.name}}</h4>
                <span>{{data.detail.point}}积分</span>
                <s>参考价 &yen;{{data.detail.referencePrice}}</s>
            </div>
            <div class="commodity-detail">
                <h4>商品详情</h4>
                <div class="detail-img">
                    <img style="width:100%" :src="item.imageUrl" v-for="item in data.detail.detailPics" alt="">
                </div>
            </div>
        </div>
      <footer >
        <div class="commodity-ctrl">
          <span @tap="_addToCart($route.params.id)">加入购物车</span>
          <span @tap='getNow = !getNow'>立即兑换</span>
        </div>

      </footer>
      <div class="mui-backdrop" v-if="getNow">
          <div class="get-now">
            <div class="closeBtn" @tap='getNow = !getNow'>&times;</div>
            <div class="mui-numbox-wrap">
              <span>兑换数量</span>
              <div class="mui-numbox number" >
                <!-- "-"按钮，点击可减小当前数值 -->
                <button class="mui-btn mui-numbox-btn-minus" type="button" @tap='subGoodsNum'>-</button>
                <input class="mui-numbox-input" type="number" v-model="goodsNum" />
                <!-- "+"按钮，点击可增大当前数值 -->
                <button class="mui-btn mui-numbox-btn-plus" type="button" @tap='addGoodsNum'>+</button>
              </div>
            </div>
            <div class="btn-wrap" @tap='goToSettlement'>
              确认
            </div>
          </div>
      </div>
    </div>
</template>
<script>
  require('../../public/images/commodity-return.png');
  require('../../public/images/commodity-car-link.png');
  import store from '../mall-store';
  export default {
    data: function () {
      return {
        data: store.state,
        getNow: false,
        goodsNum: 1
      };
    },
    methods: {
      subGoodsNum: function () {
        this.goodsNum = (this.goodsNum - 1) > 0 ? (this.goodsNum - 1) : 1;
      },
      addGoodsNum: function () {
        this.goodsNum = ++this.goodsNum;
      },
      goback: function () {
        window.history.go(-1);
      },
      intiSlider: function () {
        var gallery = mui('.mui-slider');
        gallery.slider({
          interval: 0
        });
      },
      _addToCart: function (goodsId) {
        store.addToCart(goodsId);
      },
      goToSettlement: function () {
        var settlement = this.goodsNum * this.data.detail.point;
        var detail = {num: this.goodsNum, 'goodsName': this.data.detail.name, 'point': this.data.detail.point, id: this.$route.params.id};
        var str = {'detail': detail, 'settlement': settlement, 'AddressId': 0};
        // console.log(JSON.stringify(str));
        window.location.href = '../../shoppingCart/index.html#/settlement/' + JSON.stringify(str);
      }
    },
    watch: {
      // 监听路由变化对详情数据进行更新
      '$route' (to, from) {
        if (to.params.id) {
          store.getDetail(to.params.id);
        }
      },
      goodsNum: function (val) {
        if (val <= 0) {
          this.goodsNum = 1;
        }
      }
    },
    created: function () {
      // 运行 数据中转站的函数
      store.getDetail(this.$route.params.id);
    },
    ready: function () {
    }
  };
</script>
